<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <div>
          <router-link :to="{ path: '/music/add' }">
            <Button
              type="primary"
              icon="md-add"
              @click="addItem()"
              >新增音乐
            </Button>
          </router-link>
        </div>

        <Input
          placeholder="音乐名"
          v-model="bloc.form.musicName"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="音乐英文名"
          v-model="bloc.form.englishName"
          style="width: 180px; margin-right: 10px"
        />
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, 15)"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              type="info"
              @click="modifyItem(row)"
            >
              编辑
            </Button>
            <Button
              size="small"
              type="warning"
              @click="removeItem(row)"
            >
              删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
    <!-- <ChangeAccountPwd
      :showPsdModal="bloc.isShowPsdModal"
      :idx="bloc.accountId"
      @savePwdModal="bloc.savePwdModal()"
      @closeModal="bloc.isShowPsdModal = false"
    ></ChangeAccountPwd> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { ListBloc } from '@/view/music/ListBloc';
import { FormBloc } from '@/view/music/FormBloc';
import { formatDate } from '@/base/util/Dates';
import ChangeAccountPwd from '@/component/ChangeAccountPwd.vue';
import { Validation } from '@/base/Validation';
import { Resources } from '@/base/Resources';
import { Music } from '@/base/model/Music';

const columns = [
  {
    title: '音乐名',
    key: 'musicName',
    align: 'left',
    minWidth: 150,
    tooltip: true
  },
  {
    title: '音乐英文名',
    key: 'englishName',
    align: 'left',
    width: 150,
    tooltip: true
  },
  {
    title: '音乐文件url地址',
    key: 'musicUrl',
    align: 'left',
    width: 150,
    tooltip: true
  },
  {
    title: '下发指令',
    key: 'code',
    align: 'left',
    width: 150,
    tooltip: true
  },
  {
    title: '音乐图片',
    key: 'isHide',
    align: 'center',
    width: 100,
    render: (h: any, params: any) => {
      return h('div', [
          h('img', {
              domProps: {
                  src: params.row.imgUrl
              },
              style: {
                  width: '50px',
                  height: '50px'
              }
          })
      ]);
    },
    tooltip: true
    },
  {
    title: '创建时间',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: formatDate(
            new Date(params.row.created),
            'yyyy-MM-dd hh:mm:ss'
          )
        }
      });
    },
    width: 200,
    align: 'left',
    tooltip: true
  },
  {
    title: '更新时间',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: formatDate(
            new Date(params.row.updated),
            'yyyy-MM-dd hh:mm:ss'
          )
        }
      });
    },
    width: 200,
    align: 'left',
    tooltip: true
  },
  {
    title: '操作',
    slot: 'action',
    width: 47 * 3,
    align: 'left',
    fixed: 'right'
  }
];

@Component({ components: { ChangeAccountPwd } })
export default class extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc
        .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
        .catch((e) => {
          vm.$Message.error('操作错误');
        });
    });
  }

  bloc: ListBloc = new ListBloc();
  formBloc: FormBloc = new FormBloc()
  columns = columns;
  Validation = Validation;
  Resources = Resources;

  addItem() {
    this.bloc.form.id = 0;
  };

  modifyItem(dataItem: Music) {
    this.$router.replace(`/music/${dataItem.id}`);
  }

  removeItem(dataItem: Music) {
    this.$Modal.confirm({
      title: '提示',
      content: '确认删除后将无法恢复！还要继续吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        this.bloc
          .removeItem(dataItem)
          .then((value) => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          })
          .then(() => {
            this.$Message.success('删除成功');
          })
          .catch((e) => {
            this.$Message.error('删除失败');
          });
      }
    });
  }

}
</script>

<style lang="less">
</style>
